import React, { Component } from 'react'
import { Icon } from 'antd-mobile'

export default class AccountPageV3 extends Component {
  constructor() {
    super()
    this.renderGrid = this.renderGrid.bind(this)
  }
  render() {
    return (
      <div className={`rt-account-page-v3-container`}>
        <div className={`rt-account-header`}>
          <div className={`rt-left`}>
            <img alt="logo" src={require('static/images/logo-sm-v3.png')} />
            <span>131****2345</span>
            <img alt="authed?" src={require('static/images/authed-v3.png')} />
          </div>
          <Icon type="right" />
        </div>

        <div className={`rt-grid-box`}>
          {
            [
              '持仓明细', '历史交易', '个人信息',
              '收支明细', '赠券', '银行卡',
              '安全设置', '通知公告', '账户切换',
            ].map(this.renderGrid)
          }
        </div>
      </div>
    )
  }
  renderGrid(v, i) {
    return (
      <div
        className={`${i === 3 ? '-highlight' : ''} ${i === 4 ? '-active' : ''}`}
      >
        <Icon type="question" />
        <span>{v}</span>
      </div>
    )
  }
}